변수 섀도잉

자바스크립트는 스코프(Scope) 기반 언어입니다. 내부 스코프에서 외부와 같은 이름의 변수를 선언하면 외부 변수가 가려지는 현상이 발생하는데, 이를 **섀도잉(Shadowing)**이라고 합니다.

1️⃣ 핵심 개념: 섀도잉이란?

섀도잉이란, 더 좁은(내부) 스코프에서 선언된 변수가 바깥 스코프의 동일한 이름의 변수를 가리는 현상입니다.

let status = "global";

function run() {
  let status = "local"; // ← '섀도잉'
	console.log(status); // "local"
}

• run() 함수 내부의 status는 외부의 status를 가려서 무시
• 외부 변수는 여전히 살아 있지만, 접근이 안 됨

📌 스코프가 깊어질수록, 더 가까운 스코프의 변수가 우선

---

2️⃣ 섀도잉의 특징과 위험성

특징	설명
자동 적용된	변수명이 같으면 스코프에 따라 자동으로 발생
읽기 혼란	겉보기엔 같은 변수처럼 보여도 동작이 달라짐
디버깅 어려움	외부 값을 참조하려다 내부 값이 사용되는 등, 의도치 않은 결과 초래 가능

특히 함수형 코드, 중첩된 블록, 콜백 내부에서는 실수로 섀도잉이 발생하기 쉬움

---

3️⃣ 실무에서 자주 마주치는 패턴

🔹 블록 스코프 안에서

let count = 1;

if (true) {
  let count = 2; // 외부 count 섀도잉
  console.log(count); // 2
}

console.log(count); // 1

🔹 함수 매개변수로 섀도잉

const username = "Alice";

function greet(username) {
  console.log(username); // 매개변수가 외부 변수를 섀도잉
}

🔹 콜백/클로저 안에서

let config = "default";

function load() {
  let config = "loaded"; // 바깥 config를 섀도잉
  setTimeout(() => {
    console.log(config); // "loaded" (외부 config 아님)
  }, 1000);
}

---

4️⃣ 섀도잉을 피하거나 안전하게 다루는 법

🔹 변수 이름을 명확히 구분

let userName = "Alice";

function handleUser() {
  let currentUserName = "Bob"; // 섀도잉 피함
}

🔹 ESLint 사용: no-shadow

• no-shadow 룰을 켜면 섀도잉 발생 시 경고를 줌

🔹 필요한 경우만 의도적으로 사용

function outer() {
  let mode = "light";

  function inner() {
    let mode = "dark"; // 일부러 섀도잉
    return mode;
  }
}

✔️ 명확한 목적이 있거나 단기적으로 override하려는 경우만 허용